<template>
    <div class="animeCont">
      <!-- flag1 控制 -->
      <!-- <button @click='flag1=!flag1' style="position: absolute;z-index: 999;">buuu</button> -->

      <!-- 水纹提示 -->
      <!--       
      <transition
        enter-active-class="animate__animated animate__fadeInBottomLeft"
        leave-active-class="animate__animated animate__fadeOutBottomRight"
      >
        <div class="welcomeTip tip01" v-if='flag1'>Welcome to SAM TodoApp!</div>
      </transition>
      -->
      
      <!-- 居中提示 -->
      <transition 
        enter-active-class="animate__animated animate__fadeInBottomLeft"
        leave-active-class="animate__animated animate__fadeOutBottomRight"
        @after-enter="afterEnter"
      >
        <div class="centerTip" v-if='flag1'>
          Welcome to SAM TodoApp!
          <div class="tipLine"></div>
        </div>
      </transition>
    </div>
</template>

<script setup>
import 'animate.css'

import {ref,onMounted} from 'vue'
let emit = defineEmits(['toggleFlag'])
let flag1 = ref(false)

// 动画进入之前 修flag使其出现动画
onMounted(()=>{
  flag1.value = true
})

// 动画加载后 修flag使其退出
const afterEnter = ()=>{
  setTimeout(()=>{
      flag1.value = false
      emit('toggleFlag')
  },1000)
}


</script>

<style scoped>
  .animeCont{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    background-color: rgba(0, 0, 0, .5);

    display: flex;
    justify-content: center;
    align-items: center;
  }
  .welcomeTip{
    position: absolute;
   
    color: #999;
    font-size: .35rem !important;
    transform-origin: 0 0;
    
  }
  .tip01{ top: 10%; left: 5%;transform: rotate(45deg);}
  .tip02{ bottom: 0; left: 5%;transform: rotate(-90deg);}
  .tip03{ top: 0%; left: 5%;}

  .centerTip{
    
    width: 60%;
    z-index: 99;
    color: rgba(255,255,255,.86);

    text-align: center;
  }
  .tipLine{
    height: 15px;
    background-color: #C5CBEB;
    border-radius: 10px;
  }

</style>
